<template>
  <div>
    <el-button @click="handle(2,0)"
               type="primary">新 增</el-button>
    <el-table :data="tableData"
              border
              class="mt-20"
              style="width: 100%">
      <el-table-column align="center"
                       prop="name"
                       label="100分包名称"></el-table-column>
      <el-table-column align="center"
                       prop="validPeriod"
                       label="有效期（月）"></el-table-column>
      <el-table-column align="center"
                       prop="applicableThrong"
                       label="适用人群"></el-table-column>
      <el-table-column align="center"
                       prop="correlationNum"
                       label="关联医院（个）">
        <template slot-scope="scope">
          <el-tag type="primary"
                  @click="looklook(scope.row.id)">{{scope.row.correlationNum}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center"
                       prop="createTime"
                       label="上线时间">
        <template slot-scope="scope">
          <span>{{commonFunction.timestampFormat(new Date(scope.row.createTime), 'yyyy-MM-dd hh:mm')}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center"
                       prop="address"
                       label="状态">
        <template slot-scope="scope">
          <span style="color:#f00">{{scope.row.status === 1 ?'上架':'下架'}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center"
                       width="240"
                       label="操作">
        <template slot-scope="scope">
          <el-button type="primary"
                     @click="handle(3,scope.row)">编 辑</el-button>
          <el-button type="info"
                     @click="handle(4,scope.row)">{{scope.row.status === 0 ?'上 架':'下 架'}}</el-button>
          <el-button type="danger"
                     @click="handle(5,scope.row)">删 除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <page @getList="_getList"
          :pageTotal="pageTotal"
          ref="page"></page>
    <one-dialog v-if="showdialog"
                :dialogData='dialogData'
                @closedialog='showdialog=false;_getList()' />
    <el-dialog title="适用院区"
               center
               :visible.sync="dialogVisible"
               width="30%"
               :close-on-click-modal='false'
               :before-close="handleClose">
      <el-card class="box-card">
        <div v-for="(it,index) in look"
             :key='index'
             class="text item">
          {{it}}
        </div>
      </el-card>
      <span slot="footer"
            class="dialog-footer">
        <el-button type="primary"
                   @click="handleClose">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import Page from '@/base/page/page'
  import onedialog from './onedialog'
  import { mapGetters } from 'vuex'
  export default {
    data () {
      return {
        tableData: [],
        pageTotal: 0,
        showdialog: false,
        dialogVisible: false,
        look: [],
        dialogData: {
          show: false,
          info: {},
          title: '新增'
        }
      }
    },
    mounted () {
      this._getList()
    },
    methods: {
      handleClose () {
        this.dialogVisible = false
      },
      looklook (id) {
        this.post(this.api.cooperationHospital.getCorrelationHospitalList, { id: id }).then(res => {
          this.dialogVisible = true
          this.look = res.data.object
        })
      },
      _getList () {
        let param = {
          pageSize: this.page.pageSize,
          pageIndex: this.page.pageIndex,
        }
        this.post(this.api.cooperationHospital.getHealthPage, param).then(res => {
          if (res.data.code === '200') {
            this.tableData = res.data.object;
            this.pageTotal = res.data.totalNum;
          } else {
            this.$Message.error(res.data.message);
          }
        })
      },
      handle (index, row) {
        switch (index) {
          case 2:
            this.showdialog = true
            this.dialogData = {
              show: true,
              info: null,
              title: '新增'
            }
            break
          case 3:
            this.showdialog = true
            this.dialogData = {
              show: true,
              info: row,
              title: '编辑'
            }
            break
          case 4:
            let state;
            row.status === 1 ? state = 0 : state = 1;
            this.$confirm(`您是否要${state === 1 ? '上架' : '下架'}该套餐？`, '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {

              this.post(this.api.cooperationHospital.updateHealthStatus, { status: state, id: row.id }).then(res => {
                if (res.data.code === '200') {
                  this.$message.success(`${state === 1 ? '上架' : '下架'}成功!`);
                  this._getList();
                } else {
                  this.$message.warning(res.data.message);
                }
              })
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消'
              })
            });
            break
          case 5:
            this.$confirm('此操作将永久删除, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              this.post(this.api.cooperationHospital.deleteHealthById, { id: row.id }).then(res => {
                if (res.data.code === '200') {
                  this.$message.success(res.data.message)
                  this._getList()
                } else {
                  this.$message.warning(res.data.message)
                }
              })
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              })
            });
            break
        }
      }
    },
    computed: {
      ...mapGetters([
        'page'
      ])
    },
    components: {
      Page,
      'one-dialog': onedialog
    }
  }
</script>

<style>
</style>